<template>
  <div class="goods-list-container">
    <my-header :title="title"></my-header>
    <my-table :list="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <input
            @keydown.esc="scope.row.inputValue = ''"
            v-model="scope.row.inputValue"
            @keydown.enter="enterFn(scope.row)"
            @blur="scope.row.inputVisible = false"
            v-focus
            style="width: 100px"
            v-if="scope.row.inputVisible"
            type="text"
          />
          <button
            v-else
            style="display: block"
            @click="scope.row.inputVisible = true"
            class="btn btn-primary btn-sm add-tag"
          >
            +Tag
          </button>
          <br />
          <span
            v-for="(item, index) in scope.row.tags"
            :key="index"
            class="badge bg-warning"
            style="margin-left: 5px"
          >
            {{ item }}
          </span>
        </td>
        <td>
          <button @click="del(scope.row.id)" class="btn btn-sm btn-danger">
            删除
          </button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
// 目标1:渲染数据
// MyTable 是我们封装的复用组件，所以数据应该在使用该组件的地方获取
// 1.1 在MyGoods.vue中发起ajax请求获取数据
// 1.2 获取到数据后存储在data中
// 1.3 将data中的list传给MyTable.vue
// 1.4 在MyTable.vue中进行渲染(记得给删除按钮加bs样式)

// 目标2:使用插槽
// MyTable 组件的灵活度不够,使用插槽来提高它的灵活度,在任何场景下都可以根据需求来决定内部的标签
// 2.1 在MyTable中定义两个插槽 slot标签表头和表体
// 2.2 在给两个slot标签添加name属性
// 2.3 在MyGoods组件中使用MyTable时传入两个template并设置插槽名称
// 2.4 标体的数据需要使用作用域插槽传递给MyGoods使用

// 目标3:渲染标签
// 3.1 使用v-for 循环渲染作用域插槽传递过来 scope.row.tags 数组
// 3.2 设置 badge 样式(查官网)
// 3.3 设置一个margin  隔开一点

// 目标4: 删除数据
// 4.1 给删除按钮绑定一个点击事件(事件处理函数在MyGoods中声明)
// 4.2 传递id给事件处理函数
// 4.3 根据id找到索引,最后根据索引删除数据

// 目标5:添加tab
// 点击tab按钮没出现输入框自动获取焦点,失去焦点关闭input，回车新增tag，esc清空内容
// 5.1 点击tab,按钮消失输入框出现
// 5.2 输入框自动获取焦点
// 5.3 失去焦点，输入框消失,按钮出
// 5.4 监测input回车,无数据拦截
// 5.5 监测input取消,清空数据
// 5.6 监测input回车,有数据添加

import MyHeader from "../components/MyHeader.vue";
import MyTable from "../components/MyTable.vue";
export default {
  components: {
    MyHeader,
    MyTable,
  },
  data() {
    return {
      title: "GoodList案例",
      list: [],
  
    };
  },
  methods: {
    del(id) {
      let index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);
    },
    enterFn(obj) {
      obj.inputVisible = false;
      console.log(obj.inputValue);
      if (obj.inputValue.trim().length === 0) {
        alert("请输入数据");
        return;
      }
      obj.tags.push(obj.inputValue);
      obj.inputValue = "";
    },
  },
  async created() {
    let res = await this.$axios({ url: "/api/goods" });
    this.list = res.data.data;
  },
};
</script>
<style lang="less" scoped>
.goods-list-container {
  padding: 45px 0 50px 0;
}
</style>